<template>
  <div id="detail">
    <detail-nav-bar class="detail_nav"
                    @titleClick="titleClick"
                    ref="nav"></detail-nav-bar>
    <scroll class="content"
            ref="scroll"
            @scroll="contentScroll"
            :probe-type="3">
      <detail-swiper :top-images = topImages></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"></detail-goods-info>
      <detail-param-info ref="params" :param-info="goodsParams"></detail-param-info>
      <detail-comment-info ref="comment" :comment-info="commentInfo"></detail-comment-info>
      <goods-list ref="recommend" :goods = 'recommend'></goods-list>
    </scroll>
    <detail-bottom-bar @addCart="addCart"></detail-bottom-bar>
    <back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
  </div>
</template>

<script>
import DetailSwiper from "./DetailSwiper";
import DetailNavBar from "./childComps/DetailNavBar";
import DetailBaseInfo from "./childComps/DetailBaseInfo";
import DetailShopInfo from "./childComps/DetailShopInfo";
import DetailGoodsInfo from "./childComps/DetailGoodsInfo";
import DetailParamInfo from "./childComps/DetailParamInfo";
import DetailCommentInfo from "./childComps/DetailCommentInfo";
import GoodsList from "components/content/goods/GoodsList";
import DetailBottomBar from "./childComps/DetailBottomBar";

import Scroll from "components/common/scroll/Scroll";

import {getDetail,Goods,Shop,GoodsParams,getRecommend} from "network/detail";

import {itemListenerMixin,backTopMixin} from "components/common/mixin";
import {debounce} from "components/common/utils";




export default {
  name: "Detail",
  components:{
    GoodsList,
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    Scroll,
    DetailGoodsInfo,
    DetailParamInfo,
    DetailCommentInfo,
    DetailBottomBar,

  },
  mixins:[itemListenerMixin,backTopMixin],
  data(){
    return{
      iid :null,
      topImages:[],
      goods:{},
      shop:{},
      detailInfo:{},
      goodsParams:{},
      commentInfo:{},
      recommend:[],
      themeTopY:[],
      getThemeTopY:null,
      currentIndex:0,
    }
  },
  created() {
    //1.数据保存并传入iid
    this.iid = this.$route.params.iid

    //1.根据iid活动请求数据
    getDetail(this.iid).then(res =>{
      const data = res.result
      console.log(res)
    //2.获取顶部轮播图数据
    this.topImages = data.itemInfo.topImages;
    //3.获取商品信息
    this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services);
    //4.创建店铺信息
    this.shop = new Shop(data.shopInfo)
    //5.直接保持商品详情数据
    this.detailInfo = data.detailInfo;
    //6.获取参数信息
    this.goodsParams = new GoodsParams(data.itemParams.info, data.itemParams.rule);
    //7.评论信息
      if (data.rate.cRate !==0)this.commentInfo = data.rate.list[0]
    })

    //8.获取
    getRecommend(this.recommend).then(res =>{
      this.recommend = res.data.list;
    })

    this.getThemeTopY=debounce(()=>{

      this.themeTopY = []

      this.themeTopY.push(0)
      this.themeTopY.push(this.$refs.params.$el.offsetTop)
      this.themeTopY.push(this.$refs.comment.$el.offsetTop)
      this.themeTopY.push(this.$refs.recommend.$el.offsetTop)
      this.themeTopY.push(Number.MAX_VALUE)
      console.log(this.themeTopY)
    },100)



    /*this.$nextTick(()=>{
      //根据最新数据，对应的DOM已经渲染了
      //但是对应的图片还没有渲染出来获取不到正确的offsetTop
      // offsetTop值不对时，都是图片的问题
      this.themeTopY = []

      this.themeTopY.push(0)
      this.themeTopY.push(this.$refs.params.$el.offsetTop)
      this.themeTopY.push(this.$refs.comment.$el.offsetTop)
      this.themeTopY.push(this.$refs.recommend.$el.offsetTop)
    })*/


  },
  methods:{
    imageLoad(){
      this.$refs.scroll.refresh()
      this.getThemeTopY()
    },
    titleClick(index){
      this.$refs.scroll.scrollTo(0,-(this.themeTopY[index]),500)
    },
    contentScroll(position){
      // 获取y值
      const positionY = -position.y
      length = this.themeTopY.length
      for (let i = 0; i < length-1; i++) {
        if (this.currentIndex != i &&(positionY >=this.themeTopY[i] && positionY<this.themeTopY[i+1])){
          this.currentIndex =i
          this.$refs.nav.currentIndex = this.currentIndex
        }
        /*if (this.currentIndex != i && ((i<length-1 && positionY >= this.themeTopY[i] && positionY < this.themeTopY[i+1] )
            || (i === length -1 && positionY > this.themeTopY[i]))){
          this.currentIndex =i
          console.log(this.currentIndex)
          this.$refs.nav.currentIndex = this.currentIndex
        }*/
      }

      //3.获取
      this.isShowBackTop = (-position.y) > 1000
    },
    addCart(){
      //获取购物车需要展示的信息
      const product = {};
      product.image = this.topImages[0]
      product.title = this.detailInfo.title;
      product.desc = this.detailInfo.desc;
      product.price = this.detailInfo.newPrice;
      product.iid = this.iid;

      //将商品添加到购物车中
      // this.$store.commit('addCart',product)
      // this.$store.dispatch('addCart',product)

      //添加购物车成功
      this.$store.dispatch('addCart',product).then(res =>{
        // setTimeout(()=>{
        //   this.message =res
        //   this.show = true
        // },1500)\
        console.log( this.$toast)
        this.$toast.show(res,2000)

      })
    }
  },
  mounted() {

  },
  updated() {

  },
  destroyed() {
    this.$bus.$off('itemImageLoad',this.itemImgListener)
  }
}
</script>

<style scoped>
#detail {
  position: relative;
  z-index: 9;
  background-color: #fff;
  height: 100vh;  /*设置父元素的高度为视口高度*/
}

.content{
  overflow: hidden;
  position: absolute;
  top: 44px;
  bottom: 0px;
  left: 0;
  right: 0;
}
.detail_nav{
  position: relative;
  z-index: 9;
  background-color: #fff;
}
</style>